<template>
	<view class="content">
		<view class="box" v-if="is_qing===1">
			<view class="people-box u-flex">
				<view class="box-title">
					管理员
				</view>
				<view class="imgs-box u-flex">
					<view class="item-img-bg" v-for="(item1,i) in user_ids_array" :key="i" >{{strFormat(item1.nickname)}}</view>
					<!-- <u--image class="user-img" v-for="(item1,i) in user_ids_array" :key="i"
						:src="item1.avatar" shape="circle" width="40rpx" height="40rpx">
					</u--image> -->
					<text class="add-btn" @click="pickUser('manager')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
           <u-button class="save-btn" @click="saveForm">保存</u-button>
		</view>
		<view v-else class="content-empty">
			<view class="empty">
				<image class="img-empty" src="@/static/empty.png"></image>
			</view>
			<view class="txt mt-20">您没有清外足迹设置权限哦~</view>
		</view>
		<myTabBar :list='tabList' :currentIndex="4"></myTabBar>
	</view>
</template>

<script>
	import myTabBar from '@/component/customTabBar/customTabBar.vue'
	import {
		saveZuji,
		zujiDetail,
		articleList
	} from '@/api/schoolEventApi.js'
	export default {
		components:{
			myTabBar
		},
		data() {
			return {
				tabList: [{
						title: "首页",
						url: "/pages/tabbar-5-detial/schoolEvent/schoolEvent",
						icon: "home"
					},
					{
						title: "待办",
						url: "/pages/tabbar-5-detial/backlog/backlog",
						icon: "chat"
					},
					{
						title: "草稿",
						url: "/pages/tabbar-5-detial/draft/draft",
						icon: "edit-pen"
					},
					{
						title: "我的发布",
						url: "/pages/tabbar-5-detial/myPublish/myPublish",
						icon: "file-text"
					},
					{
						title: "清外足迹",
						url: "/pages/tabbar-5-detial/schoolEvent/footConfig",
						icon: "file-text"
					}
				],
				auth_icon: require('@/static/img/mettingRoomConfig/auth-icon.png'),
				form: {
					user_ids_user:[]
				},
				info: {
					user_ids_user:[]
				},
				user_ids_array:[],
				type: "",
				is_qing:0,
			};
		},
		onReady(){
			let id=uni.getStorageSync('foot_id')
			this.getzujiDetail(id)
			this.getList()
		},
		onLoad(options) {},
		onShow() {
			var userlist = uni.getStorageSync('sel_user_list');
			var ids = '';
			var users = [];
			console.log("userlist",userlist,userlist.length>0);
			if(userlist&&userlist.length>0){
				for (var i = 0; i < userlist.length; i++) {
				  ids = i == 0 ? userlist[i].id : ids + "," + userlist[i].id;
				}
				users=userlist;
				console.log("111",this.form)
				if (this.type == "manager") {
					this.form.user_ids_user = users;
					this.info.user_ids_user = ids;
				}
				this.user_ids_array=this.form.user_ids_user
				console.log("222",ids,users,this.form)
			}
		},
		methods: {
			strFormat(str){
				if(str.length>3){
					return str.substring(0,3)+'...';
				}else{
					return str
				}
			},
			async getList() {
				let params = {
					limit: 10,
					page: 1
				};
				uni.showLoading({
					title: '加载中'
				});
				await articleList(params).then(res => {
					console.log(res)
					uni.hideLoading();
					this.is_qing=res.data.is_qing
				})
			},
			getzujiDetail(id) {
				let params = {
					id: id
				}
				zujiDetail(params).then(res => {
					console.log(res)
					this.form.user_ids_user=res.data;
					var ids = '';
					if(res.data&&res.data.length>0){
						for (var i = 0; i < res.data.length; i++) {
						  ids = i == 0 ? res.data[i].id : ids + "," + res.data[i].id;
						}
					}
					
					this.info.user_ids_user=ids
					this.user_ids_array=this.form.user_ids_user
				   uni.setStorageSync('ext_data', this.form);
				   uni.setStorageSync('foot_id',this.form.id)
				   uni.removeStorageSync('sel_user_list');
				})
			},
			pickUser(type) {
				this.type = type;
				var user_ids = 0;
				if (this.type == "manager") {
				    user_ids = this.info.user_ids_user;
				}
				uni.setStorageSync('sel_user_ids', "0," + user_ids);
				const url = "/pages/tabbar/meeting-room/change/index?user_ids=" + user_ids
				uni.navigateTo({
					url,
				});

			},
			saveForm() {
				let params = {
					id:uni.getStorageSync('foot_id'),
					user_ids: JSON.stringify(this.form.user_ids_user)
				}
				console.log("111--params", params)
				saveZuji(params).then(res => {
					console.log(res)
					if (res.code ===1) {
						uni.removeStorageSync('ext_data');
						this.$toast('保存成功');
					} else {
						this.$toast(res.msg);
					}

				})
			}
		}

	};
</script>

<style lang="less">
	.content {
		width: 100%;
		min-height: calc(100vh - 182rpx);
		background: #f8f8f8;
	}

	.u-flex {
		display: flex;
		align-items: center;
		
	}
    .imgs-box{display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		flex: 1;}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		width: 80%;
	}

	.user text {
		font-size: 24rpx;
		font-weight: 500;
		color: #4871C0;
		margin-left: 10rpx;
	}
	.box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		width: 140rpx;
	}

	.box-row {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.box-row text:first-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.box-row text:last-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.box {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.people-box {
		justify-content: space-between;
		padding: 30rpx;
	}

	// /deep/..uni-picker-container .uni-picker-custom * {
	// 	color: #333333 !important;
	// 	font-size: 28rpx !important;
	// }

	.u-flex-input {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input .uni-input-placeholder {
		color: #999999 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.people-box:first-child {
		border-bottom: 2px solid #F8F8F8;
	}

	.add-btn {
		background-color: #4871C0;
		border-radius: 100%;
		color: #ffffff;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.user-img {
		margin-right: 20rpx;
	}
 .item-img-bg{
		   margin-right: 20rpx;
    	   width:64rpx;
    		height:64rpx;
    		border-radius: 50%;
    		background-color: #4871C0;
    		color: #ffffff;
    		font-size: 20rpx;
    		text-align: center;
    		line-height: 64rpx;
    }
	.box-content {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 30rpx 0;
		border-bottom: 2px solid #F8F8F8;
		margin-bottom: 20rpx;
	}

	.file-box {
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.save-btn {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 120rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		background-color: #4871C0;
		border-radius: 8rpx;
		width: calc(100% - 40rpx);
	}

	.color-blue {
		color: #4871C0 !important;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	.reason-content {
		width: 100%;
		border-radius: 8rpx;
		opacity: 1;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	/deep/.u-textarea {
		background: #F8F8F8;
		border-radius: 8rpx;
		opacity: 1;
		text-align: left;
	}

	/deep/.uni-textarea-placeholder {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.rect {
		width: 638rpx;
		height: 588rpx;
		margin: 50% auto;
		text-align: center;
		position: relative;
	}

	.bg-img {
		width: 638rpx;
		height: 588rpx;
	}

	.warp-content {
		width: 100%;
		position: absolute;
		top: 48%;
		right: 0;
		display: flex;
		flex-direction: column;
		font-size: 36rpx;
		font-weight: bold;
		color: #666666;
		line-height: 60rpx;
	}

	.warp-button {
		width: 356rpx;
		height: 87rpx;
		line-height: 87rpx;
		text-align: center;
		background: #4871C0;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 40rpx auto;
	}

	.clsoe {
		position: absolute;
		right: 30rpx;
		top: 22%;
	}

	.warp-button2 {
		background: #FF7A00;
	}

	.sign-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.file-content {
		width: 90%;
		word-break: break-all;
	}

	.box-between {
		justify-content: space-between;
	}

	.sign-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.prople-num {
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
		text-align: right;
		margin: 30rpx 0;
	}

	.end {
		justify-content: end;
	}

	.push-button {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
	.content-empty {
		margin: 0 auto;
		.empty {
			margin: 0 auto;
			width: 200rpx;
			height: 180rpx;
	        padding: 200rpx 0 10rpx;
			.img-empty {
				width: 100%;
				height: 100%;
			}
		}
	
		.txt {
			color: #636871;
			text-align: center;
		}
	}
</style>
